<template>
	<uni-nav-bar fixed="true" backgroundColor="#f8f8f8" statusBar="true" border="false" left-icon="left" title="消息详情" @clickLeft="back"></uni-nav-bar>
	<view class="uni-padding-wrap">
		<view class="font_size_32 tc h100">{{MessageInfo.title}}</view>
		<view class="font_size_22 tc mb40">发布时间：{{MessageInfo.createDate}}</view>
		<!-- 使用v-html渲染富文本内容 -->
		<view class="lineInfo" v-html="MessageInfo.messageContent"></view>
	</view>
</template>

<script>
	// 注入全局变量
	import api from '@/common/api/webapi.js'; /*api*/
	import storageUtil from '@/common/util/storageUtil.js';
	export default {
		components: {
		},
		data() {
			return {
				MessageInfo: {
					messageType: "",
					title: "",
					coverUrl: "",
					bannerUrl: '',
					messageShortDesc: '',
					showBannerType:"",
					createDate:"",
					messageContent:"",
				}
			}
		},
		onLoad(opt) {
			// 检查是否有参数传入
			if (opt && opt.param) {
				try {
					// 解析传递过来的参数
					let params = JSON.parse(decodeURIComponent(opt.param));
					// 确保能正确获取到消息ID
					let messageId = params.data || params;
					this.messageInfo(messageId);
				} catch (error) {
					// 如果解析失败，显示提示信息
					this.MessageInfo.title = '参数错误';
					this.MessageInfo.messageContent = '无法加载消息详情，请返回重试';
					this.MessageInfo.createDate = new Date().toLocaleString();
				}
			} else {
				this.MessageInfo.title = '参数缺失';
				this.MessageInfo.messageContent = '请从消息中心进入详情页';
				this.MessageInfo.createDate = new Date().toLocaleString();
			}
		},
		methods: {
			back(){
				uni.navigateBack();
			},
			// 获取用户信息
			messageInfo(ID){
				api.getMessageInfo({params:{messageId:ID}}).then(res => {
					if (res.code === 0 && res.data) {
						this.MessageInfo = res.data;
					}
				}).catch(error => {
					console.error('获取信息失败:', error);
				})
			},
		}
	}
</script>

<style>
	.uni-padding-wrap {
		padding: 20rpx;
	}
	
	.font_size_32 {
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.font_size_22 {
		font-size: 22rpx;
		color: #888888;
	}
	
	.tc {
		text-align: center;
	}
	
	.h100 {
		height: 100rpx;
		line-height: 100rpx;
	}
	
	.mb40 {
		margin-bottom: 40rpx;
	}
	
	/* 修复富文本内容上方空白问题的样式 */
	.lineInfo {
		padding: 0;
		margin: 0;
		font-size: 28rpx;
		line-height: 65rpx;
		color: #333333;
		min-height: 100rpx;
		text-align: justify;
	}
	
	page {
		background-color: #fff;
		min-height: 100vh;
	}
</style>